<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8"/>
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>聚合DNS管理系统 - 登录</title>
  <link href="{$cdnpublic}twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
  <link href="{$cdnpublic}font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  <link href="/static/css/app.min.css" rel="stylesheet">
  <link href="/static/css/skins/{$skin}.css" rel="stylesheet">
  <link href="/static/css/bootstrap-table.css" rel="stylesheet"/>
  <script src="{$cdnpublic}jquery/3.6.4/jquery.min.js"></script>
  <!--[if lt IE 9]>
    <script src="{$cdnpublic}html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="{$cdnpublic}respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
<style type="text/css">
body{color:#999;background-color:#f1f4fd;background-size:cover}
a{color:#444}
.login-screen{max-width:430px;padding:0;margin:100px auto 0 auto}
.login-screen .well{border-radius:3px;-webkit-box-shadow:0 0 30px rgba(0,0,0,.1);box-shadow:0 0 30px rgba(0,0,0,.1);background:#fff;border:none;padding:0}
@media (max-width:767px){.login-screen{padding:20px 0}
}
.profile-img-card{width:100px;height:100px;display:block;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;margin:-93px auto 30px;border:5px solid #fff}
.profile-name-card{text-align:center}
.login-head{background:#899fe1;border-radius:3px 3px 0 0}
.login-form{padding:40px 30px;position:relative;z-index:99}
#login-form{margin-top:20px}
#login-form .input-group{margin-bottom:15px}
#login-form .form-control{font-size:14px}
</style>
</head>
<body>
<div class="container">
    <div class="login-wrapper">
        <div class="login-screen">
            <div class="well">
                <div class="login-head">
                    <img src="/static/images/login-head.png" style="width:100%;"/>
                </div>
                <div class="login-form">
                    <img id="profile-img" class="profile-img-card" src="/static/images/user.png"/>
                    <p id="profile-name" class="profile-name-card"></p> 
                    <form action="" id="login-form" onsubmit="return doLogin()">
                        <div class="input-group">
                            <div class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></div>
                            <input type="text" class="form-control" placeholder="用户名" name="username" required="required"/>
                        </div>
                        <div class="input-group">
                            <div class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></div>
                            <input type="password" class="form-control" placeholder="密码" name="password" required="required"/>
                        </div>
                        <div class="input-group">
                            <div class="input-group-addon"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></div>
                            <input type="text" class="form-control input-lg" placeholder="验证码" name="code" autocomplete="off" required="required"/>
                            <span class="input-group-addon" style="padding: 0">
                              <img id="verifycode" src="/verifycode" height="45" onclick="this.src='/verifycode?r='+Math.random();" title="点击更换验证码">
                            </span>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-success btn-lg btn-block" id="submit" style="background:#708eea;">登 录</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{$cdnpublic}layer/3.1.1/layer.js"></script>
<script>
function doLogin(){
    var username = $("input[name='username']").val();
    var password = $("input[name='password']").val();
    var code = $("input[name='code']").val();
    if(username == ''){
        layer.msg('用户名不能为空', {icon: 2});
        return false;
    }
    if(password == ''){
        layer.msg('密码不能为空', {icon: 2});
        return false;
    }
    if(code == ''){
        layer.msg('验证码不能为空', {icon: 2});
        return false;
    }
    var ii = layer.load(2);
    $.ajax({
        type: "POST",
        url: "/login",
        data: $("#login-form").serialize(),
        dataType: 'json',
        success: function(data){
            layer.close(ii);
            if(data.code == 0){
                layer.msg('登录成功，正在跳转到首页', {icon: 1,shade: 0.01,time: 15000});
                window.location.href = '/';
            }else{
                if(data.vcode==1){
                    $("#verifycode").attr('src', '/verifycode?r='+Math.random())
                }
                layer.alert(data.msg, {icon: 2});
            }
        }
    });
    return false;
}
</script>
</body>
</html>